<div id="appRoot">
<header class="navbar">
  <!--
  <div class="sifo-logo"><img src="../../assets/images/SIFO.png"></div>
  -->
  <div class="zc-metro"><img src="../../assets/images/metro5.png"></div>
  <div class="zc-title">氢燃料车智能运维平台</div>
  <div class="quit-btn">
    <button mat-button (click)="logout($event)">退出登录</button>
  </div>
</header>
<mat-sidenav-container class="sbc-contents">
  <mat-sidenav mode="side" opened="true" #sidenav class="sbc-sidenav">
    <mat-nav-list>
      <mat-list-item (click)="navigateTo('trains')">
        <button mat-icon-button>
          <mat-icon [svgIcon]="'tools'"></mat-icon>
        </button>
        <h4>列车状态监控</h4>
      </mat-list-item>
      <mat-list-item (click)="navigateTo('discover')">
        <button mat-icon-button>
          <mat-icon [svgIcon]="'dashboard'"></mat-icon>
        </button>
        <h4>列车采集数据</h4>
      </mat-list-item>
      <mat-list-item (click)="navigateTo('fault')">
        <button mat-icon-button>
          <mat-icon [svgIcon]="'fault'"></mat-icon>
        </button>
        <h4>列车故障数据</h4>
      </mat-list-item>
      <mat-list-item (click)="navigateTo('dashboard')">
        <button mat-icon-button>
          <mat-icon [svgIcon]="'performance'"></mat-icon>
        </button>
        <h4>数据趋势分析</h4>
      </mat-list-item>
      <mat-list-item (click)="navigateTo('users')">
        <button mat-icon-button>
          <mat-icon [svgIcon]="'users'"></mat-icon>
        </button>
        <h4>用户管理</h4>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <div class="sbc-sidenav-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>
</div>
